<template>
	<view class="">
		<tableData class="addC">
			<template v-slot:two v-if="props">
				<van-checkbox v-model="props.flag" shape="square" icon-size="14px">
					{{ props.name }}
				</van-checkbox>
				<van-icon name="plus" class="addTag" />
			</template>
		</tableData>
		<view class="" v-for="(i, index) in props.items">
			<tableData class="addC">
				<template v-slot:three>
					<view class="flex w100 jcsb">
						<view class="mgl20 flex">
							位置:
							<van-checkbox v-model="i.flag" shape="square" icon-size="14px" class="mgl20">{{ i.issuePosition }}</van-checkbox>
						</view>
						<!-- <van-button type="primary" size="small" class="mgr20">添加位置</van-button> -->
					</view>
				</template>
			</tableData>

			<view v-for="(t, num) in i.itemMsg">
				<tableData class="addC">
					<template v-slot:three>
						<view class="flex w100 jcsb">
							<view class="mgl20">
								<van-checkbox v-model="t.flag" shape="square" icon-size="14px">
									<text class="fwb">问题:</text>
									{{ t.issue }}
								</van-checkbox>
							</view>
							<!-- <van-button type="primary" size="small" class="mgr20">添加位置</van-button> -->
						</view>
					</template>
					<template v-slot:four>
						<!-- 项目经理 -->
						<view class="flex" v-for="j in jlList" v-if="false">
							<van-button type="primary" size="small">{{ j }}</van-button>
						</view>
						<!-- 工作组 -->
						<view class="flex" v-for="j in orList" v-else @click="work(j, index)">
							<van-button type="primary" size="small">{{ j }}</van-button>
						</view>
					</template>
					<template v-slot:five>
						<view class="">{{ t.promoter }}</view>
					</template>
					<template v-slot:six>
						<view class="">{{ t.followUp }}</view>
					</template>
					<template v-slot:seven>
						<view class="">{{ statusList[t.status] }}</view>
					</template>
					<!-- <template v-slot:eight>
					<image :src="i.picture" mode="aspectFill"></image>
				</template> -->
				</tableData>
				<view v-for="qus in t.qa">
					<!-- 问 -->
					<tableData>
						<template v-slot:three>
							<view class="flex w100 jcsb">
								<view class="mgl20 ansW">
									<text class="cr fwb">{{ qus[0].name }}:</text>
									{{ qus[0].content }}
								</view>
								<van-button type="primary" size="small" class="mgr20">回答</van-button>
							</view>
						</template>
					</tableData>
					<!-- 答 -->
					<view v-for="ans in arr(qus)">
						<tableData>
							<template v-slot:three>
								<view class="flex w100 jcsb">
									<view class="mgl20 ansW">
										<text class="cr fwb mgr10">{{ ans.name }}</text>
										<text class="fwb mgr10">@</text>
										<text class="cr fwb mgr10">{{ ans.ansQ }}:</text>
										{{ ans.content }}
									</view>
									<van-button type="primary" size="small" class="mgr20">回答</van-button>
								</view>
							</template>
						</tableData>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, inject, reactive, ref, watch } from 'vue';
import tableData from './tableData.vue';

const props = defineProps({
	items: {
		type: Object
	},
	name: {
		type: String
	},
	flag: {
		type: Boolean
	}
});

// let items: any = inject('userInfo');

let arr = computed(() => {
	return function (ans) {
		ans = ans.slice(1);
		return ans;
	};
});

const jlList: Array<String> = ['返修', '合格', '指派'];
const orList: Array<String> = ['提问', '跟进', '转交', '协同', '完成'];
const statusList = {
	10: '待跟进',
	20: '跟进中',
	30: '完成'
};

let check = reactive([true, false]);
let checkAll = ref(false);

//全选
watch(
	() => props.items,
	(newval, oldval) => {
		console.log(newval, oldval);
		newval.map((i, index) => {
			if (true) {
				i.itemMsg.map((j) => {
					j.flag = i.flag;
				});
			}
		});
	},
	{ immediate: true, deep: true }
);
// watch(position, (newval, oldval) => {
// 	if (newval != oldval && newval) {
// 		// const checkAll = () => {
// 		// 	posGroup.value.toggleAll(true);
// 		// };
// 	}
// });

// const toggleAll = (i) => {
// 	i.value.toggleAll();
// };
// watch(checkAll, (newval, oldval) => {
// 	if (oldval != newval && !newval) {
// 		check[0] = false;
// 		check[1] = false;
// 	}
// });

function work(item, index): void {
	console.log(item, props.items[index]);
}
</script>

<style lang="scss">
.ansW {
	width: 420rpx;
}
.addTag {
	color: #fff;
	padding: 5rpx;
	border-radius: 10rpx;
	background-color: red;
	font-size: 23rpx;
}
</style>
